<template>
    <div class="foot-menu">
        <ul>
            <router-link tag="li" v-for="(item,index) in arr" :to="{'path':'/'+item.nick}" :key="index" active-class="active">
                <i :class="item.icon"></i>
                {{item.name}}
            </router-link>
        </ul>
    </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'mz-nav',
  data () {
    return {
      arr: [
        {
            index: 0,
            name: "电影",
            nick: 'film',
            icon: 'iconfont icon-dianying'
        },
        {
            index: 1,
            name: '影院',
            nick: 'cinema',
            icon: 'iconfont icon-yingyuana'
        },
        {
            index: 2,
            name: '9.9拼团',
            nick: 'pintuan',
            icon: 'iconfont icon-pintuandingdan'
        },
        {
            index: 3,
            name: '我的',
            nick: 'center',
            icon: 'iconfont icon-wode'
        }
                ]             
    }
  }  
}
</script>

<style lang="scss">
@import '@/styles/common/px2rem.scss';

.foot-menu{
    width: 100%;
    background-color: #fff;
    height: px2rem(49);
    ul{
        height: px2rem(49);
        display: flex;
        justify-content: center;
        li{
            flex: 1;
            font-size: px2rem(10);
            align-items: center;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            i{
                font-size: px2rem(10);
            }
        }
        .active{
            color: #FF844C
        }
    }
}
</style>
